<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=no">
	<meta name="format-detection" content="telphone=no, email=no"/>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<title>环保数据管家</title>
	<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
	<link rel="stylesheet" type="text/css" href="assets/css/app.css">
	<link rel="stylesheet" type="text/css" href="assets/css/car.css">
</head>
<body>
	<header class="bar-nav">
		<a class="icon icon-left" onclick="javascript:history.go(-1);"></a>
		<h1 class="title">机动车环保检测</h1>
	</header>
	<div class="environment-content">
		<div id="monitoring-map"></div>
	</div>	
	<div class="marker-info" id="marker-info"></div>
</body>
<script src="assets/js/jquery.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EO5oHjEfgBz7QieWfqG08jcx"></script>
<script type="text/javascript">
	var URL = 'http://58.213.141.220:8989/njhbindex';//'http://61.155.85.77:8999';
	function getJSONData(url,callback){
      $.ajax({
          type: "get",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          url: url,  //这里是网址
          success: function (json) {
              callback(json)
          },
          timeout: 90*1000,
          error: function (XMLHttpRequest, textStatus, errorThrown) {
              console.error(url,textStatus+": "+errorThrown);
          }
      });
  	}
  	var map = new BMap.Map("monitoring-map");
		point = new BMap.Point(118.78,32.04);
		map.centerAndZoom(point, 12);
  	getJSONData(URL+'/hbjcz',function(data){
		var  lat,lng,point,marker,position,html,info=[],markerData=[];
		// 百度地图API功能
		var map = new BMap.Map("monitoring-map");
		point = new BMap.Point(118.78,32.04);
		map.centerAndZoom(point, 12);
		var myicon = new BMap.Icon('assets/img/monitoring-icon.png',new BMap.Size(35, 46));
		var myicon_2 = new BMap.Icon('assets/img/monitoring-icon-current.png',new BMap.Size(35, 46));
		$.each(data.data,function(name,index){
			lat = index.jd;
			lng = index.wd;
			point = new BMap.Point(lat,lng);
			marker = new BMap.Marker(point, {icon: myicon}); 
			map.addOverlay(marker);
			markerData.push(marker);
			marker.addEventListener("click",function(e){
				position = e.target.getPosition();
				for(var j in markerData){
					markerData[j].setZIndex(0);
					markerData[j].setIcon(myicon);
				}
				e.target.setZIndex(99999);
				e.target.setIcon(myicon_2);
				map.panTo(new BMap.Point(index.jd, parseFloat(index.wd)-0.02));
				showInfos(index);
			});
		});
		function showInfos(data){
			var tel = data.lxdh == null ? '暂无号码' : data.lxdh;
			html = '<p class="marker-tit">'+data.hbckmc+'</p>'
				 + '<ul>'
				 +'<li><div class="left-box"><span>地点：</span>'
				 +'<span class="color-gray">'+data.hbckaddress+'</span></div>'
				 + '<div class="right-box"><span>电话：</span>'
				 +'<span class="color-gray">'+tel+'</span></div></li>'
				 +'</ul>';
			$('#marker-info').html(html);
			setTimeout(function(){
				$('#marker-info').show();
			},500);
			
		}
	});
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan style='display:none;' id='cnzz_stat_icon_1259663983'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1259663983' type='text/javascript'%3E%3C/script%3E"));</script>